<template>
  <div class="content-box">
    <el-row>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">单据名称：</span>
        <span class="l-content text--info subtext">{{ billName }} </span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">单据编号：</span>
        <span class="l-content text--info subtext">{{ billNum }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">单据类型：</span>
        <span class="l-content text--info subtext">{{
          formatterStatusType(baseInfo?.flowMinType)
        }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">所属项目：</span>
        <span class="l-content text--info subtext">{{
          materialData?.projectName
        }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap">
        <span class="right-align">所属合同：</span>
        <span class="l-content text--info subtext">{{
          materialData?.sectionName
        }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap" v-if="module !== 'snap'">
        <span class="right-align">所属单体：</span>
        <span class="l-content text--info subtext">{{
          materialData?.monomerName
        }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap" v-if="module !== 'snap'">
        <span class="right-align">工程类型：</span>
        <span class="l-content text--info subtext">{{
          materialData.atypeName
        }}</span>
      </el-col>
      <el-col :span="8" class="flex-info-wrap" v-if="module !== 'snap'">
        <span class="right-align">子工程类型：</span>
        <span class="l-content text--info subtext">{{
          materialData.a1TypeName
        }}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, watch, ref } from "vue";
import { useRoute } from "vue-router";
import { materialInfo, concealInfo, witnessInfo } from "/@/api/construction";
import { BillStatusMap } from "../../types";
const props = defineProps({
  basicInfoData: {
    type: Object,
    default: () => {}
  },
  module: {
    type: String,
    default: "material"
  },
  billNum: {
    type: String,
    default: ""
  }
});
const route = useRoute();
let baseInfo = ref(null);
let materialData = ref({});
let billName = ref(route.query.billName || "");
// 格式化类型
const formatterStatusType = row => {
  return row && BillStatusMap.get(row);
};

// 获取材料验收详情
const materialDetail = async newVal => {
  try {
    let id = newVal[props.module + "Id"];
    let apiName = materialInfo;
    switch (props.module) {
      case "material":
        apiName = materialInfo;
        break;
      case "conceal":
        apiName = concealInfo;
        break;
      case "witness":
        apiName = witnessInfo;
        break;
      case "snap":
        materialData.value.projectName = newVal.projectName;
        materialData.value.sectionName = newVal.sectionName;
        break;
      default:
        break;
    }
    if (id && props.module !== "snap") {
      let postData = { id };
      const { code, data } = await apiName(postData);
      if (code === 200) {
        materialData.value = data;
      }
    }
  } catch (err) {
    console.log(err);
  }
};

watch(
  () => props.basicInfoData,
  newVal => {
    if (newVal) {
      baseInfo.value = newVal;
      materialDetail(newVal);
    }
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<style lang="scss" scoped></style>
